<!DOCTYPE html> 
<html lang="ja"> 
    <head> 
        <meta charset="utf-8"> 
        <title>Templating with JavaScript</title>
        <style>
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -o-box-sizing: border-box;
                box-sizing: border-box;
                font-family: "Meiryo", Arial, Helvetica, sans-serif;
                line-height: 1.5em;
            }
            body {
                font-size: 14px;
            }
        </style>
        <script type="text/javascript" src="./../../src/tmlib.js"></script>
        <script>
            // データ部分
            var data = [
                {
                    title   : "Shooting",
                    link    : "http://tmlib-js.googlecode.com/svn/trunk/tutorial/shooting/index.html",
                    img     : "https://lh6.googleusercontent.com/-0saDLhKo7IU/TwbTF8-c7VI/AAAAAAAAAVQ/LJLPtlUH920/s950/shooting.jpg",
                    alt     : "シューティングサンプル",
                },
                {
                    title   : "Paint",
                    link    : "http://tmlib-js.googlecode.com/svn/trunk/tutorial/paint/index.html",
                    img     : "https://lh6.googleusercontent.com/-_2Qq96rZ0gE/TwbTYb_qcpI/AAAAAAAAAVY/dYKub9ThSJQ/s950/paint.jpg",
                    alt     : "ペイントサンプル",
                },
                {
                    title   : "Circle Collision",
                    link    : "http://tmlib-js.googlecode.com/svn/trunk/samples/circle-collision/index.html",
                    img     : "https://lh5.googleusercontent.com/-gsm3vtz3rDQ/TwbP4mHU6UI/AAAAAAAAAUU/hIYPZ2k4Dts/s950/circle-collision.jpg",
                    alt     : "サークルの衝突サンプル",
                },
                {
                    title   : "Unit Circle",
                    link    : "http://tmlib-js.googlecode.com/svn/trunk/samples/unit-circle/index.html",
                    img     : "https://lh3.googleusercontent.com/-683pfzSF4KU/TwbR12b9RfI/AAAAAAAAAVA/5Wj5g6J1PHE/s950/unit-circle.jpg",
                    alt     : "単位円サンプル",
                },
            ];
            
            /**
             * メイン処理
             */
            TM.main(function(){
                // 結果を代入
                var eResult   = TM.$id("result");
                var eTemplate = TM.$id("template");
                eResult.innerHTML = formatTemplate(eTemplate.innerHTML, data);
            });
            
            /**
             * テンプレートをフォーマット
             * {...} を data で置き換える.
             */
            var formatTemplate = function(template, data) {
                var result = "";
                
                for (var i=0,len=data.length; i<len; ++i) {
                    result += template.format(data[i]);
                }
                
                return result;
            };
            
        </script>
    </head>
    
    <body>
        <h1>Templating with JavaScript</h1>
        <p>
            javascript でテンプレート化してみました. format の活用例です.
        </p>
        <div id="result">
            ここに結果が入ります.
        </div>
        
        <!-- [template start] -->
        <script type="template" id="template">
            <section>
                <h2><a href="{link}">{title}</a></h2>
                <p>
                    <img alt="{alt}" src="{img}" width="300" border="1" />
                </p>
            </section>
        </script>
        <!-- [template end] -->
    </body>
</html>
